<!DOCTYPE html>
<html lang="ch">
<head>
    <title></title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 总结：
        v-for指令用于展示列表数据
        语法：<li v-for="(item,index) of items" :key="index",这里key可以是index，
            最好是遍历对象的唯一标识
        可遍历数组、对象、字符串、指定次数
    -->
    <div id="demo">
        <h3>遍历数组</h3>
        <ul>
            <li v-for="(person,k) in arr1" :key="k">
                {{person.name}}--{{person.age}}--{{person.wai}}--{{k}}
            </li>
        </ul>
        <br>
        <h3>遍历对象</h3>
        <ul>
            <li v-for="(c,k,index) in car" :key="index">
              {{k}}--{{c}}--{{index}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //关闭生产提示
        new Vue({
            el:"#demo",
            data:{
                name:"test",
                arr1:[
                    {"name":"张三","age":"20","wai":"法外狂徒"},
                    {"name":"李四","age":"21","wai":"法中狂徒"},
                    {"name":"王五","age":"22","wai":"法内狂徒"},
                ],
                car:{
                    name:"比亚迪",
                    type:"-_-||",
                    price:"10W"
                }
            }
        })
    </script>
</body>
</html>